<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <% include _head.html %>
    <title>注册</title>
    <link href="/css/login.css" rel="stylesheet">

</head>
<body style="background-color: #f3f3f3">
<div class="container">
    <form class="form-signin">
        <h2 class="form-signin-heading">找回密码</h2>
        <label for="inputUsername" >手机号码</label>
        <!--将初始焦点设定到用户名输入框上-->
        <input type="text" id="inputUsername" class="form-control" placeholder="请输入手机号码" required autofocus>
        <label for="inputPassword">请输入新密码</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="请输入密码" required>
        <label for="inputREPassword">请重复输入密码</label>
        <input type="password" id="inputREPassword" class="form-control" placeholder="请再次输入密码" required>
        <div class="checkbox">
            <a href="/login">登录</a>
        </div>
        <button id="registerButton" class="btn btn-lg btn-primary btn-block" type="submit">确定</button>
    </form>
</div>
<!--注册成功的弹出框-->
<div class="modal fade" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">成功</h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-success" role="alert">密码已经重置成功！稍后将为您跳转到登录页面 </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
<% include _foot.html %>
<script>
    $(function () {
        $('#registerButton').click(function (e) {
            e.preventDefault();
            var username = $("#inputUsername").val();
            var password = $("#inputPassword").val();
            var rePassword = $("#inputREPassword").val();
            if(!username){
                alert("用户名不能为空!");
                //将焦点移动到用户名上
                $("#inputUsername").focus();
                return;
            }
            if(!password){
                alert("密码不能为空!");
                //移动焦点到密码
                $("#inputPassword").focus();
                return;
            }
            if(!rePassword){
                alert("请再次输入密码!");
                $("#inputREPassword").focus();
                return;
            }
            if(!(password===rePassword)){
                alert("两次输入密码不一致!");
                //移动焦点到密码
                $("#inputPassword").focus();
                return;
            }
            //判断手机号码
            var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
            if(!myreg.test(username))
            {
                alert('请输入有效的手机号码！');
                $("#inputUsername").focus();
                return ;
            }
            postUrl('/resetPassword',  {username: username, password: password});
        })
    })

    //弹出成功的提示框
    var successWithData = function() {
        $("#mymodal").modal("toggle");
        //延迟4秒跳转到登录界面
        setTimeout(function () {
            location.href = '/login';
        }, 4000);
    }
</script>